<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <link rel="stylesheet" href="../static/js/angular-growl/angular-growl.min.css"/>
    <style>
        .demo{
            margin-bottom:10px;
            border-bottom:1px solid #1b926c;
        }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <div ng-app="myApp">
     <div class="row demo">
         <h3>Demo1: angular growl消息提示示例</h3>
         <div ng-controller="GrowlController">
             <label>
                 消息类型<br/>
             </label>
             <div class="btn-group">

                 <p>
                     <label>
                     <input type="radio" name="alertType" ng-model="alertType" value="success">
                     success
                     </label>
                 </p>
                 <p>
                     <label>
                         <input type="radio" name="alertType" ng-model="alertType" value="info">
                         info
                     </label>
                 </p>

                 <p>
                     <label>
                         <input type="radio" name="alertType" ng-model="alertType" value="warn">
                         warn
                     </label>
                 </p>

                 <p>
                     <label>
                         <input type="radio" name="alertType" ng-model="alertType" value="error">
                         error
                     </label>
                 </p>
                 <p>
                     <label>
                         Enable HTML in messages
                         <input type="checkbox" ng-model="enableHtml">
                     </label>
                 </p>
                 <p>
                     <label>
                         Timeout (this demo has a standard timeout of 2000 ms, enter a number to override standard or -1 for no timeout)
                         <input type="number" ng-model="timeout"  value="">
                     </label>
                 </p>
             </div>
             <p>
                 <button ng-click="createMessage()">显示消息</button>
             </p>
             <div growl></div>
         </div>
     </div>
     </div>
 </div>

</body>
</html>
<script src="../static/js/angular-1.3.15/angular.js" type="text/javascript"></script>
<!--<script src="../static/js/angular-1.3.15/angular-animate.min.js"></script>-->
<!--<script src="../static/js/angular-1.3.15/angular-mocks.js"></script>-->
<script src="../static/js/angular-1.3.15/angular-sanitize.js"></script>
<script src="../static/js/angular-growl/angular-growl.js" type="text/javascript"></script>
<script>
    var myApp=angular.module('myApp', ['angular-growl','ngSanitize']);
    myApp.controller("GrowlController", ['$scope', 'growl', function($scope, growl) {
        $scope.message="I am default message";
        $scope.timeout=2000;

        $scope.createMessage = function() {
            var config = {};
            if ($scope.timeout) {
                config.ttl = $scope.timeout;
            }
            if ($scope.enableHtml) {
                config.enableHtml = $scope.enableHtml;
            }

            if ($scope.alertType === "success") {
                $scope.message='<h3>I am success message</h3>';
                growl.addSuccessMessage($scope.message, config);
            }

            if ($scope.alertType === "warn") {
                $scope.message='<p> <img src="http://shikezhi.com/assets/images/logo.png" alt="http://www.shikezhi.com"/><br/>警告消息</p>';
                growl.addWarnMessage($scope.message, config);
            }

            if ($scope.alertType === "info") {
                $scope.message='<p style="padding:20px;background:tomato;color:#ffffff;border:1px solid green;">普通消息</p>'
                growl.addInfoMessage($scope.message, config);
            }

            if ($scope.alertType === "error") {
                $scope.message='<p style="text-decoration: underline;font-weight:bold;">错误消息</p>'
                growl.addErrorMessage($scope.message, config);
            }
        }
    }]);

</script>
